<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
<style type="text/css">
	.m-ipt{
			-webkit-appearance: none;
		    background-color: #fff;
		    background-image: none;
		    border-radius: 4px;
		    border: 1px solid #dcdfe6;
		    box-sizing: border-box;
		    color: #606266;
		    display: inline-block;
		    font-size: inherit;
		    height: 32px;
		    line-height: 32px;
		    outline: none;
		    padding: 0 10px;
		    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		    width: 100%;
		}
	.m-ipt:focus {
	    outline: none;
	    border-color: #409eff;
	}
	.c-green{
		color: green;
		font-weight: bold;
	}
	.c-red{
		color: red;
		font-weight: bold;
	}
</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>收发货管理</li>
			    <li>到货记录</li>
			</ul>
			<div class="container-fluid">
				
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline" role="form" id="form1">
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="订单号"
							v-model="search.order_no"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="销售"
							v-model="search.acct_name"
							url="{%:url('Account/getSalers')%}"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<div class="checkbox">
							<label><input type="checkbox" value="1" v-model="search.status"> 待发</label>
						</div>
					    <button type="button" class="btn btn-primary" @click="getList(1)">查询</button>
					    <button type="button" class="btn btn-info" @click="sendExpress">
					    	<i class="fa fa-paper-plane-o"></i> 发货
					    </button>
					    <span style="color:red;font-weight: bold;font-size: 16px;">发货可以在订单列表操作</span>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>选择</th>
								<th>日期</th>
								<th>档口</th>
								<th>商品</th>
								<th>商品信息</th>

								<th>到货数量</th>
								<th>到货备注</th>
								<th>已发数量</th>
								<th>订单号 | 销售</th>
								
								<th>收件信息</th>
								<th>拟定快递</th>
								<th>入库</th>
								<th>货物状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>				
								<tr v-for="row in rows">
									<td>
										<input type="checkbox" :value="row.id" v-model="checkedId">
									</td>
									<td>{{row.add_day}} 
										<span style="padding-left: 5px; font-size: 10px; color:#aaa;">
										{{row.add_time}}</span>
									</td>
									<td>{{ row.stall_name }}</td>
									<td>
										<a :href="row.goods_pic" title='点击看大图' target="_BLANK" class="pre_view">
											<img :src="row.pic_tmb" height="38">
										</a>
									</td>
									<td>
										{{ row.goods_name }}
										<div style="color:#aaa">{{ row.color }} / {{ row.spec }}</div>
									</td>
									<td>{{ row.qty }}</td>
									<td>{{ row.remarks }}</td>
									<td :class="[row.deliver_qty==row.qty ? 'c-green':'c-red']">{{ row.deliver_qty }}</td>
									<td>
										{{ row.order_no }}<span style="color:#aaa"> - {{ row.order_sn }}</span>
										<div style="color:#aaa">{{ row.saler }}</div>
									</td>
									
									<td>
										{{ row.cust }} <span style="color: #bbb">|</span> {{ row.phone }}
										<!-- <div style="color:#aaa">{{ row.area_path }}</div> -->
										<div style="color:#aaa">{{ row.detail_addr }}</div>
									</td>
									<td>{{ row.express }}</td>
									<td>{{ row.acct_name }}</td>
									<td>
										<span class="label" :class="progress_class[row.status]">
										{{ row.status_txt }}</span>
									</td>
									<td>
										<a href="#" style="color:red" @click="del(row)"><i class="el-icon-delete"></i> 删除</a>
									</td>
								</tr>
								<tr v-if="rows.length ==0">
									<td style="color:red" colspan="13">
										<i class="fa fa-search" aria-hidden="true"></i> 查询无记录
									</td>
								</tr>
						</tbody>
					<!-- <div id='tips' style="display: none">加载中...</div> -->
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<vue-modal title="发货登记" :visible.sync="showModal" width="70%" height="80%">
			<form class="form-horizontal" role="form" method="post" style="width: 90%;">
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">物流公司</label>
					<div class="col-sm-3">
						<select class="form-control" v-model="express.name">
							<option value=""> - 选择 - </option>
							<option value="EMS"> EMS </option>
							<option value="顺丰"> 顺丰 </option>
							<option value="圆通"> 圆通 </option>
							<option value="中通"> 中通 </option>
							<option value="京东"> 京东 </option>
							<option value="德邦"> 德邦 </option>
						</select>
					</div>
					<label for="lastname" class="col-sm-2 control-label">物流单号</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" v-model="express.express_no">
					</div>
				</div>
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>订单号</th>
							<th>商品</th>
							<th>名称</th>
							<th>颜色/尺码*数量</th>
							<th>数量</th>
							<th>备注</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item,i in express.items">
							<td>{{ i+1 }}</td>
							<td>{{ item.order_no }}</td>
							<td>
								<a :href="item.goods_pic" title='点击看大图' target="_BLANK">
									<img :src="item.goods_pic" height="38" class="pre_view">
								</a>
							</td>
							<td>{{ item.goods_name }}</td>
							<td>{{ item.color }} / {{ item.spec }} * {{ item.qty }}</td>
							<td><input type="text" class="m-ipt" size="6" v-model="item.exp_qty"></td>
							<td><input type="text" class="m-ipt" v-model="item.exp_remarks"></td>
						</tr>
					</tbody>
				</table>
				<div class="form-group">
					<div class="col-sm-2">
						<button type="button" class="btn btn-primary" @click="expressHandle()">确定</button>
					</div>
				</div>
			</form>
		</vue-modal>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					cate_name: '',
					brand_name: '',
					acct_name: '',
					order_no:'',
					status: [1]
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				progress_class: ['','label-primary','label-success'],
				checkedId: [],
				express: {
					name: '',
					express_no: '',
					items: []
				}
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal
			},
			created: function(){
				this.getList();
				//console.log(this.rows);
			},
			methods:{
				// 删除到货数据
				del(row){
					console.log({row});
					let t = this;
					if(confirm('确定要删除 ？')) {
    					$.post("{%:url('StockIn/del')%}",{id:row.id},function(rsp){
							t.getList(t.cur_page);
							if(rsp.code == 1){
								t.$message({
								type: "success",
								message: "删除成功!"
								});
							}else{
								t.$message({
								type: "error",
								message: "删除失败!"
								});
							}
						},'json')
    				}
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('StockIn/getList')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				sendExpress: function(){
					if (this.checkedId.length ==0){
						alert('没有选择数据');
						return;
					}
					var data = {
						stock_ids: this.checkedId 
					};
					var _this = this;
					$.post("{%:url('StockIn/getList')%}",data,function(rsp){
						var is_error = 0;
						for (var i in rsp.data.rows) {
							if (rsp.data.rows[i].status ==2){
								is_error ++;
							} 
							rsp.data.rows[i].exp_qty = '';
							rsp.data.rows[i].exp_remarks = '';
						}
						console.log(is_error);
						if (is_error) {
							alert('已发货的不能选');
							return;
						} else {
							_this.express.items = rsp.data.rows;
							_this.showModal = true;
						}
					},'json');
				},
				expressHandle(){
					var data = this.express;
					var _this = this;
					$.post("{%:url('Express/handle')%}",data,function(rsp){
						alert(rsp.msg);
						if (rsp.code) {
							_this.getList();
							_this.showModal = false;
							_this.checkedId = [];
						}
					},'json')
				}
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})	
	</script>
</body>

</html>